<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.box {
		background-color: pink;
		width: 200px;
		height: 200px;
		animation: move 5s linear infinite 0s;
	}
	@keyframes move {
		0% {
			transform: translateX(0);
		}
		30% {
			transform: translateX(500px);
		}
		60% {
			transform: translateY(500px);
		}
		100% {
			transform: translateX(-500px);
		}
	}
    </style>
</head>
<body>
	<p> 使用@keyframes和animation实现一个元素先水平向右移动500px，然后向下移动500px，然后向左移动500px，最后向上500px回到原位，5S完成动画并一直重复</p>
	<div class="box"></div>
</body>
</html>